<!--  -->
<template>
  <div class="seller" ref="menu" >
    <div class="menu-wrapper">
    <!-- 这是头部 -->
    <div class="header">
      <div class="up">
        <div class="left">
          <h1 class="title">{{seller.name}}</h1>
          <star class="star" :score="seller.score" :size="24"></star>
          <span class="rate-count">({{seller.ratingCount}})</span>
          <span class="sell-count">月销售{{seller.sellCount}}单</span>
        </div>
        <div class="right">
          <div class="icon" :class="{on:favorite}" @click="collect">
            <i class="icon-favorite"></i>
          </div>
          <div class="text" >已收藏</div>
        </div>
      </div>
      <split></split>
      <div class="down">
        <div class="min-price">
          <div class="text">起送价</div>
          <div class="price">
            {{seller.minPrice}}
            <span class="unit">元</span>
          </div>
        </div>
        <div class="seller-delivery">
          <div class="text">商家配送</div>
          <div class="price">
            {{seller.deliveryPrice}}
            <span class="unit">元</span>
          </div>
        </div>
        <div class="delivery-time">
          <div class="text">平均配送时间</div>
          <div class="price">
            {{seller.deliverTime}}
            <span class="unit">分钟</span>
          </div>
        </div>
      </div>
    </div>
    <div class="split"></div>
    <div class="contain-activity">
      <div class="content">
        <h1 class="title">公告与活动</h1>
        <div class="desc">{{seller.bulletin}}</div>
        <div class="activity">
          <ul>
            <li v-for="(support,index) in seller.supports" :key="index">
              <split class="split-activ"></split>
              <div class="activ-desc">
                <span class="icon " :class="classMap[support.type]" ></span>
                <span class="text">{{support.description}}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="split"></div>
    <div class="contain-sellerPic">
      <div class="content">
        <h1 class="title">商家实景</h1>
        <div class="swiper-container">
          <ul class="swiper-wrapper">
            <li class="swiper-slide" v-for="(item,index) in seller.pics" :key="index">
              <img style="width:120px;height:90px" :src="item" alt />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="split"></div>
    <div class="seller-info">
      <div class="content">
        <h1 class="title">商家信息</h1>
        <div class="info">
          <ul v-for="(item,index) in seller.infos" :key="index">
            <li>
              <split></split>
              <div class="text">{{item}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import star from '@/components/star/star'
import split from '@/common/split'
import BScroll from 'better-scroll'
import Swiper from 'swiper3'
export default {
  name: 'seller',
  props: {
    seller: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data () {
    return {
      favorite: false
    }
  },
  components: { star, split },
  created () {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
  },
  mounted () {
    this.$nextTick(() => {
      this.sellerScroll = new BScroll(this.$refs.menu, {
        click: true
      })
      this.$nextTick(() => {
        this.picSwiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          spaceBetween: 6,
          autoplay: 2000
        })
      })
    })
  },
  methods: {
    collect () {
      this.favorite = !this.favorite
    }
  }
}
</script>
<style lang='stylus' scoped>
@import '../../../node_modules/swiper3/swiper3.css'

@import '../../common/stylus/mixin'

.title
  font-size 14px
  color rgb(7, 17, 27)
  line-height 14px
  margin-bottom 8px
.seller
  position absolute
  // display flex
  overflow hidden
  top 174px
  bottom 10px
  width 100%
  .header
    width 100%
    .up
      margin 40px 18px 18px 18px
      display flex
      .left
        .star
          display inline-block
          margin-right 8px
        .rate-count, .sell-count
          font-size 10px
          color rgb(77, 86, 93)
          line-height 18px
          margin-right 12px
      .right
        display inline-block
        flex 1
        // vertical-align middle
        display flex
        flex-direction column
        // justify-content center
        .icon
          float right
          font-size 24px
          line-height 24px
          text-align right
          &.on
            color rgb(240, 20, 20)
        .text
          font-size 10px
          color rgb(77, 86, 93)
          line-height 10px
          text-align right
    .down
      display flex
      .min-price, .seller-delivery, .delivery-time
        width 33.33%
        margin 18px auto
        text-align center
        .text
          margin-bottom 4px
          font-size 10px
          color rgb(147, 153, 159)
          line-height 10px
        .price
          margin 0
          font-size 24px
          font-weight 200
          color rgb(7, 17, 27)
          line-height 24px
          .unit
            font-size 10px
      .seller-delivery
        width 33.33%
        flex 1
      .delivery-time
        width 33.33%
        flex 1
  .split
    width 100%
    height 16px
    background-color #f3f5f7
    border-top 1px solid rgba(7, 17, 27, 0.2)
    border-bottom 1px solid rgba(7, 17, 27, 0.2)
  .contain-activity
    width 100%
    .content
      margin 18px 18px 16px 18px
      .desc
        margin 0 12px 16px 12px
        font-size 12px
        font-weight 200
        color rgb(240, 20, 20)
        line-height 24px
      .activity
        margin 0
        .activ-desc
          margin 16px 12px
          vertical-align middle
          .icon
            display inline-block
            margin-right 6px
            width 16px
            height 16px
            vertical-align middle
            background-size 16px 16px
            background-repeat no-repeat
            &.decrease
              bg-image('~static/seller_img/decrease_4')
            &.discount
              bg-image('~static/seller_img/discount_4')
            &.discount
              bg-image('~static/seller_img/discount_4')
            &.special
              bg-image('~static/seller_img/special_4')
            &.invoice
              bg-image('~static/seller_img/invoice_4')
            &.guarantee
              bg-image('~static/seller_img/guarantee_4')
          .text
            font-size 12px
            font-weight 200
            color rgb(7, 17, 27)
            line-height 16px
  .contain-sellerPic
    padding 18px
    box-sizing border-box
    .content
      .swiper-container
        width 100%
        height 90px
        margin: 0px auto;
        .swiper-slide
          width 120px
          height 90px
          font-size: 18px;
          background: #aaa;
          &:after
            margin-right 0
  .seller-info
    width 100%
    .content
      margin 18px
      .info
        margin-bottom 16px
        .text
          margin 16px 12px 16px 12px
          font-size 12px
          font-weight 200
          color rgb(7, 17, 27)
          line-height 16px
</style>
